<template>
  <div class="panel">
    <kanban-tool
        @click="onKanbanToolClick"
        :actions="TOOL_ACTIONS"
        :menus="TOOL_MENUS"
        class="kanban-tool"
    />
    <kanban-panel class="kanban-panel" ref="refPanel" :style="compKanbanRect" />
    <div class="kanban-form">
      <h2 class="kanban-form__title">表单配置</h2>
      <zeng-form
          class="kanban-form__form"
          v-if="currentCardForm"
          :configs="currentCardForm"
          :model="currentCardModel"
          @change="onFormChange"
          ref="form"
      />
    </div>
  </div>
</template>

<script setup>
import KanbanTool from "./components/KanbanTool.vue";
import KanbanPanel from "./components/KanbanPanel.vue";
import { TOOL_ACTIONS, TOOL_MENUS, FORM_DEFAULT_CONFIG, DEFAULT_KANBAN_RECT, FORM_DEFAULT_MODEL } from "./constants";
import { computed, ref, unref, reactive } from "vue";
import { getKanbanStyleByRect } from "./utils";
import { useZoom } from "/@/hooks/useZoom";
import ZengForm from "/@/components/zeng-form.vue";

const cardMap = reactive({});
const cardConfigMap = {}
const cardModelMap = reactive({});
const currentCard = ref()
const refPanel = ref()
const refForm = ref()
const kanbanRect = ref(getDefaultKanbanRect())
const compKanbanRect = computed(() => getKanbanStyleByRect(unref(kanbanRect)))
// 开启缩放
useZoom(refPanel, { slopOver: true }).openZoom();

const currentCardForm = computed(() => currentCard.value && cardConfigMap[currentCard.value.id])
const currentCardModel = computed(() => currentCard.value && cardModelMap[currentCard.value.id])

/** 看板配置项被点击 */
function onKanbanToolClick (tool) {
  // 拖拽的卡片需要的数据
  const id = generateRandomNumber()
  cardMap[id] = {
    id,
    type: tool.type,
    title: tool.label,
    data: {}, // 展示的数据
    rect: {}, // 尺寸
    new: true
  }
  // 模拟点击卡片的事件
  onActiveCard(cardMap[id]);
}

/**
 * 激活卡片，得到当前的卡片表单配置信息
 * @param card
 */
function onActiveCard (card) {
  currentCard.value = card
  if (Reflect.has(cardConfigMap, card.id)) {
    return;
  }
  cardConfigMap[card.id] = FORM_DEFAULT_CONFIG[card.type]
  cardModelMap[card.id] = JSON.parse(JSON.stringify(FORM_DEFAULT_MODEL[card.type]))
}

/** 获取默认的看板尺寸 */
function getDefaultKanbanRect () {
  const rects = Object.values(DEFAULT_KANBAN_RECT);
  return rects.find(rect => rect.active) || rects[0];
}

function onFormChange (value, key, { model }) {
  model[key] = value;
  console.log(refForm.value, model)
}

function generateRandomNumber () {
  return (
      (Math.random() * 10000000).toString(16).substr(0, 4) +
      '-' +
      new Date().getTime() +
      '-' +
      Math.random().toString().substr(2, 5)
  );
}
</script>

<style scoped>
.panel {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.kanban-tool {
  position: relative;
  z-index: 2;
}
.kanban-panel {
  margin: 24px;
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
}
.kanban-form {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 81px;
  z-index: 2;

  width: 260px;
  background-color: #F7F7F8;
  overflow-y: auto;
  border-right: 1px solid #D8DCE6;
  padding-bottom: 20px;
}
.kanban-form__title {
  background-color: #F1F1F3;
  border-bottom: 1px solid #D8DCE6;
  padding: 36px 16px 12px;
  font-size: 16px;
}
.kanban-form__form {
  padding: 16px 16px 0
}
.kanban-form::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
